<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    $('body').on('click', function (e) {
      $('.ripple').remove()
      var offset = $(this).offset()
      var x = e.pageX
      var y = e.pageY
      var $ripple = $('<span class="ripple"></span>')
      $ripple.appendTo(this).css({
        left: x - offset.left - $ripple.width() / 2,
        top: y - offset.top - $ripple.height() / 2
      })
    })
  }
}
</script>
<style lang="scss">
#app {
  background: url('./assets/bg.png') center center no-repeat;
      background-size: cover;
}
</style>
